<template>
	<view class="niceui-flex-column">
		<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :indicator-color="indicatorColor" :indicator-active-color="activeColor[current]"
			:previous-margin="leftRightMargin" :next-margin="leftRightMargin"
			@change="changeItem">
			<swiper-item v-for="x in 5" :key="x">
				<view class="niceui-member-card niceui-flex-column" :class="memberLevel+'-color'">
					<view class="member-info">	
						<view class="niceui-flex-column">
							<text class="member-name">{{memberName[current]}}会员</text>
							<text class="member-end">会员到期时间：2024.01.12</text>
						</view>
						<text class="member-status" :class="'status-'+(current+1)">待提升</text>
					</view>
					<view class="grow-up-info niceui-flex-column">
						<view class="grow-up">
							<text>{{growUp[current]}}升级 ></text>
							<text>还差1成长值升级为{{memberName[current]}}会员</text>
						</view>
						<view class="grow-up-progress" :class="'progress-'+(current+1)"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="niceui-list">
			<view class="niceui-list-title">
				<text>当前已成功解锁<text class="red-strong">8项</text>功能权益</text>
			</view>
			<view class="niceui-list-content">
				<view class="niceui-content-item" v-for="(nav,index) in quanyi" :key="index">
					<text class="niceui-content-item-icon" :class="memberLevel+'-color'"> {{ nav.icon  }}  </text>
					<text class="niceui-content-item-text">{{nav.text}}</text>
					<!-- <text class="niceui-content-item-desc">{{nav.desc}}</text> -->
				</view>
			</view>
		</view>
		
		<view class="niceui-faq niceui-flex-column">
			<view class="niceui-faq-title">如何成为会员</view>
			<view class="niceui-faq-content niceui-flex-column">
				<view class="niceui-faq-content-item" v-for="(nav,index) in open" :key="index">
					<view class="niceui-faq-item-info">
						<view>
							<text class="niceui-faq-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">{{nav.text}}</text>
							<text class="niceui-faq-item-desc">{{nav.desc}}</text>
						</view>
					</view>
					<view class="niceui-faq-open">立即开通</view>
				</view>
			</view>
		</view>
		
		<view class="niceui-faq niceui-flex-column">
			<view class="niceui-faq-title">如何获得成长值</view>
			<view class="niceui-faq-content niceui-flex-column">
				<view class="niceui-faq-content-item" v-for="(nav,index) in faq" :key="index">
					<view class="niceui-faq-item-info">
						<view>
							<text class="niceui-faq-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">{{nav.text}}</text>
							<text class="niceui-faq-item-desc">{{nav.desc}}</text>
						</view>
					</view>
					<view class="niceui-faq-open">立即完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				circular:false,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				indicatorColor:'#e9e9e9',
				indicatorActiveColor:'red',
				leftRightMargin:'50rpx',
				current:0,
				memberLevel:'member1',
				activeColor:['#dbdfeb','#f7dbac','#ffe3cb','#323a53','#1d1b1b'],  //#a7b0e6; #e6bd79; #d49a67;
				growUp:['200/500','600/2000','2001/5000','5001/50000','50001/100000'], 
				memberName:['花粉','花蜜','花匠','花咖','花神'],
				quanyi:[
					{
						icon:"\u{e611}",
						text:'全场会员价',
						desc:'权益'
					},
					{
						icon:"\u{e612}",
						text:'邀请返佣',
						desc:'权益'
					},
					{
						icon:"\u{10111}",
						text:'优惠券礼包',
						desc:'权益'
					},
					{
						icon:'\u{e60b}',  //原代码：&#xe60a;
						text:'专属服务群',
						desc:'权益'
					},
					{
						icon:"\u{e60f}",
						text:'专属生日礼物',
						desc:'权益'
					},
					{
						icon:'\u{e606}',  //原代码：&#xe60a;
						text:'权益6',
						desc:'权益'
					},
					{
						icon:'\u{e606}',  //原代码：&#xe60a;
						text:'权益7',
						desc:'权益'
					},
					{
						icon:"\u{e606}",
						text:'权益8',
						desc:'权益'
					}
				],
				open:[
					{
						icon:'\u{e610}',  //原代码：&#xe60a;
						text:'购买商品或会员',
						desc:'购买价格对应成长值增长',
						class:'icon-color-1'
					}
				],
				faq:[
					{
						icon:'\u{10112}',  //原代码：&#xe60a;
						text:'购买商品或会员',
						desc:'购买价格对应成长值增长',
						class:'icon-color-1'
					},
					{
						icon:'\u{e60e}',  //原代码：&#xe60a;
						text:'成功邀请新人下首单',
						desc:'每成功邀请一位新人下单均可获得订单成长值',
						class:'icon-color-4'
					},
					{
						icon:'\u{10114}',  //原代码：&#xe60a;
						text:'粉丝赠送',
						desc:'每新增一位关注粉丝得1成长值',
						class:'icon-color-1'
					},
					{
						icon:'\u{10110}',  //原代码：&#xe60a;
						text:'分享商品并成功下单',
						desc:'分享者将获得订单金额10%成长值',
						class:'icon-color-4'
					},
					{
						icon:'\u{10116}',  //原代码：&#xe60a;
						text:'社区发帖',
						desc:'发帖+3成长值、赞+1成长值、关联商品被购买+2成长值和惊喜分佣',
						class:'icon-color-2'
					},
					{
						icon:'\u{10113}',  //原代码：&#xe60a;
						text:'钱包充值',
						desc:'每日成长值+钱包金额*1%，上限+10',
						class:'icon-color-3'
					}
				]
			}
		},
		methods: {
			changeItem(e){
				this.current = e.detail.current
				this.memberLevel = "member"+(e.detail.current+1)
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_itplyreymu.ttf?t=1702390147146') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color:#5b8cff;  //5b8cff 4194fc
	$white-color:#fff;
	$radius:5rpx;
	$border-color:#efefef;
	$color-1: #6eacfe;
	$color-2: #52f0cf;
	$color-3: #ffcd46;
	$color-4: #ff727d;
	$list-item-height:100rpx;
	$list-margin:15rpx;
	.swiper{
		width: 100vw;
		padding: 30rpx 0 0;
		height: 390rpx;
		box-sizing: border-box;
	}
	.niceui-member-card{
		height: calc(100% - 60rpx);
		background-color: #d7dfeb;
		color:#555d6e;
		border-radius: 30rpx;
		padding: 30rpx 35rpx 30rpx 40rpx;
		box-sizing: border-box;
		justify-content:space-between;
		
		width: calc(100vw - 120rpx);
		margin: 0 auto;
	}
	.member-info{
		justify-content: space-between;
		font-weight: bold;
		font-size: 38rpx;
		.member-end{
			font-size: 22rpx;
		}
		.member-status{
			background-color: #f3f7f7;
			font-weight: bold;
			font-size: 22rpx;
			border-radius: 30rpx;
			padding:0 25rpx;
			box-sizing: border-box;
			height:45rpx;
			line-height:45rpx;
		}
		.status-1{
			background-color: #f3f7f7;
		}
		.status-2{
			background-color: #fef6eb;
		}
		.status-3{
			background-color: #fef6eb;
		}
		.status-4{
			background-color: #424862;
		}
		.status-5{
			background-color: #625959;
		}
	}
	.grow-up-info{
		margin-bottom: 10rpx;
	}
	.grow-up{
		justify-content: space-between;
		font-weight: bold;
		font-size: 24rpx;
	}
	.grow-up-progress{
		margin-top: 10rpx;
		width: 100%;
		height: 11rpx;
		background-color: #b8bdc7;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.grow-up-progress::after{
		content:'';
		display: inline-block;;
		width: 30%;
		height: 100%;
		background-color: #f7fbfb;
	}
	.progress-1{
		background-color: #b8bdc7;
	}
	.progress-2{
		background-color: #e2bd81;
	}
	.progress-3{
		background-color: #f7cfa6;
	}
	.progress-4{
		background-color: #232b45;
	}
	.progress-5{
		background-color: #030303;
	}
	.niceui-list {
		background-color: #FFFFFF;
		margin:0 auto 0;
		padding-bottom:$list-margin ;
		width: calc(100vw - 0rpx);
		flex-direction: column;
		border-radius: $radius;
	}
	
	.niceui-list-title{
		padding:0rpx 50rpx 30rpx;
		font-size:30rpx;
		color:#333;
		font-weight: 500;
		width: 100vw;
		justify-content: flex-start;
	}
	.red-strong{
		color:red;
	}
	.niceui-list-content{
		box-sizing: border-box;
		padding: 25rpx 40rpx 0 40rpx;
		flex-wrap: wrap;
		.niceui-content-item{
			width:25%;
			box-sizing: border-box;
			padding:0 0 35rpx 0rpx;
			align-items: center;
			flex-direction: column;
			.niceui-content-item-icon{
				font-size:50rpx;
				font-weight: bold;
				font-family: texticons;
				border-radius: 50%;
				padding: 15rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
			}
			.niceui-content-item-text{
				color:#666;
				font-size:24rpx;
				font-weight: 400;
			}
			.niceui-content-item-desc{
				color:#999;
				font-size:24rpx;
				font-weight: 300;
				margin-top: 0rpx;
			}
			
		}
	}
	.member1-color{
		background-image:linear-gradient(#dbdfeb,#e3ebf3);
		color:#555d6e;
	}
	.member2-color{
		background-image:linear-gradient(to right,#f3d39a,#f7dfb5);
		color:#a36a09;
	}
	.member3-color{
		background-image:linear-gradient(to right,#ffe3cb,#ffebdc);
		color:#b7734f; 
	}
	.member4-color{
		background-image:linear-gradient(#28304a,#4a4e67);
		color:#ffe4de;
	}
	.member5-color{
		background-image:linear-gradient(to right,#0d0b0b,#454546);
		color:#ffe3cf;
	}
	.niceui-faq{
		background-color: #fff;
		margin:0 auto 40rpx;
		width: calc(100vw - 80rpx);
		box-sizing: border-box;
		
		flex-direction: column;
		border-radius: 30rpx;
		border: solid 0rpx #eaf7ef;
		box-shadow: 0rpx 1rpx 10rpx rgba(0,0,0,0.1);
		overflow: hidden;
		
		.niceui-faq-title{
			background-image: linear-gradient(#eaf7ef,#fff);
			padding:30rpx 40rpx 0rpx;
			box-sizing: border-box;
			font-size:30rpx;
			color:#333;
			font-weight: 600;
		}
	}
	.niceui-faq-content{
		padding:20rpx 30rpx 10rpx 40rpx;
		.niceui-faq-content-item{
			align-items: center;
			justify-content: space-between;
			margin-top: 15rpx;
			margin-bottom: 30rpx;
		}
		.niceui-faq-item-info{
			align-items: center;
			width: 70%;
		}
		.niceui-faq-item-icon{
			font-size:50rpx;
			font-weight: bold;
			font-family: texticons;
			border-radius: 20rpx;
			padding: 20rpx;
			color:#fff;
			margin-right: 20rpx;
		}
		.niceui-faq-item-text{
			color:#333;
			font-size:29rpx;
			font-weight: 400;
		}
		.niceui-faq-item-desc{
			color:#999;
			font-size:23rpx;
			font-weight: 300;
			margin-top: 5rpx;
		}
	}
	.niceui-faq-open{
		background-color: #10b575;
		color:#fff;
		font-weight: bold;
		font-size: 24rpx;
		border-radius: 30rpx;
		padding:0 30rpx;
		box-sizing: border-box;
		height:60rpx;
		line-height:60rpx;
	}
	.icon-color-1{
		background-image: linear-gradient(#72aefe, #4896ff);
	}
	.icon-color-2{
		background-image: linear-gradient(#5ff9d7, #39debd);
	}
	.icon-color-3{
		background-image: linear-gradient(#ffd155, #ffbc04);
	}
	.icon-color-4{
		background-image: linear-gradient(#ff808b, #ff6872);
	}
</style>